<template>
    <el-collapse v-model="activeName" accordion>
    <el-collapse-item :title="item.params[0].value" :name="index" v-for="(item, index) in data" :key="index">

        <div class="btn-tools">
            <el-button :type="btn.type" v-for="(btn, idx) in tools" :key="idx" @click="btn.onclick(index, item.params)">{{ btn.label }}</el-button>
        </div>

        <el-form label-position="top">
            <el-form-item :label="param.label" v-for=" (param, pindex) in item.params" :key="pindex">
                  <el-input  v-model="param.value" v-if="param.type=='text'"></el-input>
                  <label v-if="param.type=='label'">  {{ param.value }} </label>
            </el-form-item>
        </el-form>
    </el-collapse-item>
    </el-collapse>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
            default() {
                return []
            }
        }
    },

    data() {
        return {
            activeName: 0,
            activeAction: null,
            tools: [
                {label: '删除', value: 'remove', type: 'danger', onclick: this.remove},
                {label: '定位', value: 'location', type: 'primary', onclick: this.location},
            ]
        }
    },
    watch: {
        data: {
            handler(val) {
                console.log(val, 'watch data....')
                this.setLabel()
            },
            deep: true
        }
    },
    methods: {
        remove(idx, item) {
            this.$emit('remove', idx, item)
        },
        location(idx, item) {
            this.$emit('location', idx, item)
        }, 
        setLabel() {
            this.$emit('set-label', this.activeName)
        }       
    }
}
</script>

<style lang="scss">

</style>